<!--
 * @Author: lee
 * @Date: 2024-01-19 10:10:20
 * @LastEditors: lee
 * @LastEditTime: 2024-02-01 18:32:34
 * @Description: file content
-->
<template>
  <div id="dv-full-screen-container" class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import autoResize from '@/utils/autoResize'

// const fullScreenContainer = ref(null)

// const state = reactive({
//   allWidth: 0,
//   scale: 0,
//   datavRoot: '',
//   ready: false,
// })

// const initConfig = () => {
//   const { width, height } = screen

//   state.allWidth = width

//   if (fullScreenContainer.value) {
//     fullScreenContainer.value.style.width = `${width}px`
//     fullScreenContainer.value.style.height = `${height}px`
//   }
// }

// const setAppScale = () => {
//   const currentWidth = document.body.clientWidth
//   if (fullScreenContainer.value)
//     fullScreenContainer.value.style.transform = `scale(${currentWidth / state.allWidth})`
// }

// const onResize = () => {
//   setAppScale()
// }

// const afterAutoResizeMixinInit = () => {
//   initConfig()
//   setAppScale()

//   state.ready = true
// }

// autoResize(fullScreenContainer, onResize, afterAutoResizeMixinInit)

const dataScreenRef = ref(null);

onMounted(() => {
  let dom = dataScreenRef.value;
  const currentWidth = document.body.clientWidth;
  // console.log(currentWidth,'width')
  // if (currentWidth < 1920) {
  //   dom.classList.add("not");
  //   return;
  // } else {
  //   if (dom.classList.contains("not")) {
  //     dom.classList.remove("not");
  //   }
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
  // }
});

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
</script>

<style lang="scss">
.dataScreen-container {
  width: 100%;
  height: 100%;
  background: #020824;
}
.dataScreen-container .dataScreen-content {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s;
  transform-origin: left top;
  &.not {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}
</style>
